<template>
    <el-row :gutter="20" class="score-legend">
      <el-col
          v-for="(color, index) in colorLegend"
          :key="index"
          :span="4"
          class="legend-item"
      >
        <div
            class="color-box"
            :style="{ backgroundColor: `rgb(${color.R}, ${color.G}, ${color.B})` }"
        ></div>
        <span>{{ color.range }}</span>
      </el-col>
    </el-row>
</template>

<script>
export default {
  name: "ScoreLegend",
  data() {
    return {
      colorLegend: [
        { R: 255, G: 0, B: 0, range: "0-20" },
        { R: 255, G: 128, B: 0, range: "21-40" },
        { R: 255, G: 255, B: 0, range: "41-60" },
        { R: 128, G: 255, B: 0, range: "61-80" },
        { R: 0, G: 255, B: 0, range: "81-100" }
      ]
    };
  }
};
</script>

<style scoped>
.score-legend {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.color-box {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}
</style>
